<template>
  <div style="width: 100%;height: 100%;">
    <div class="left">
      <div class="header">
        <span class="title">当月园区线损情况</span>
        <span class="time">时间：{{moment(new Date()).format('YYYY-MM')}}</span>
      </div>
<!--      图表-->
      <div class="left-content">
        <div id="main_energy" :style="{width: echartsWidth}"></div>
      </div>
    </div>
    <!-- <div class="right"> -->
      <!-- <div class="list"> -->
        <!-- <div class="card" v-for="(item, index) in dataList" :key="index">
          <div class="title">{{item.title}}</div>
          <div :class="[item.title === '环比' ? (item.num > 0 ? item.color1 : item.color2) : item.color]">
            <span class="num">{{item.num}}</span>
            <span class="unit">{{item.unit}}  </span>
            <span class="icon iconfont icon-web-icon-" v-if="item.title === '环比' && item.num > 0"></span>
            <span class="icon iconfont icon-down-copy" v-if="item.title === '环比' && item.num < 0"></span>
          </div>
        </div> -->
      <!-- </div> -->
    <!-- </div> -->
  </div>
</template>

<script>
import moment from "moment";
import { getLineLossMonthList } from '@/api/datastatistics/meterread/energyReport.js'
import * as echarts from 'echarts';
export default {
  name: 'Energy',
  props: ['sidebar'],
  computed: {
    moment() {
      return moment
    },
    echartsWidth() {
      let width = '0px'
      if (this.sidebar.opened) {
        width = '776px'
      }else{
        width = '830px'
      }
      return width
    }
  },
  watch: {
    'sidebar.opened': function() {
      // 先移除之前的事件监听器
      window.removeEventListener('resize', this.handleResize);
      // 绑定新的事件监听器
      window.addEventListener('resize', this.handleResize);
      // 立即调用一次 resize，确保图表适配当前窗口大小
      this.handleResize();
    }
  },
  data(){
    return {
      myChart: null,
      // 当日总用能统计
      dataList: [
        {title: '今日', num: 10, unit: 'kW·h', color: 'c_90d7d5'},
        {title: '昨日', num: 20, unit: 'kW·h',color: 'c_0565f8'},
        {title: '环比', num: -30, unit: '%', color1: 'c_90d7d5', color2: 'c_f56c6c'},
      ],
      // 图表配置
      option: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 20, //距离左侧距离
          y: 60,//距离顶部距离
          x2: 55, //距离右侧距离
          y2: 0, //距离底部距离
          containLabel: true,
          // right: 38,
        },
        legend: {
          itemWidth: 12, // 图标宽度
          itemHeight: 12, // 图标高度
          // x: 'right', // 图例水平居中
          y: 'top', // 图例垂直居中
          data: ['总进用能','下级出用能','线损率'],
          right: '50px',
          top: '20px',
          icon: 'circle',
        },
        xAxis: {
          name: '时间',
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis:  {
          name: '单位：kW·h',
          type: 'value'
        },
        series: [
          {
            name: '总进用能',
            type: 'bar',
            stack: 'Ad',
            data: [],
            smooth: false,      //true 有弧度 ，false 没弧度（直线）
            symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
            symbolSize: 7,    //小圆点的大小
            itemStyle: {
              color: '#0565f6'    //小圆点和线的颜色
            },
          },
          {
            name: '下级出用能',
            type: 'bar',
            stack: 'Ad',
            data: [],
            smooth: false,      //true 有弧度 ，false 没弧度（直线）
            symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
            symbolSize: 7,    //小圆点的大小
            itemStyle: {
              color: '#7accc7'    //小圆点和线的颜色
            },
          },
          {
            name: '线损率',
            type: 'line',
            data: [],
            smooth: false,      //true 有弧度 ，false 没弧度（直线）
            symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
            symbolSize: 7,    //小圆点的大小
            itemStyle: {
              color: '#ff9f3f'    //小圆点和线的颜色
            },
          },
        ]
      }
    }
  },
  methods: {
    handleResize() {
      if (this.myChart) {
        this.$nextTick(function () {
          this.myChart.resize();
        })
      }
    },
    // 初始化图表
    initEcharts() {
      const chartDom = document.getElementById('main_energy'); // 确保 DOM 容器存在
      this.myChart = echarts.init(chartDom)
      this.myChart.setOption(this.option);
    },
    loadChartData(){
      getLineLossMonthList().then(response => {
        let dd = response.data;
        this.option.xAxis.data = dd.dayMonthList;
        this.option.series[0].data = dd.inDataList;
        this.option.series[1].data = dd.outDataList;
        this.option.series[2].data = dd.lineLossRateList;
        this.myChart.setOption(this.option);
      });
    }
  },
  mounted() {
    this.initEcharts();
    this.loadChartData();
  }
}
</script>
<style scoped lang="scss">
@import '../../../assets/styles/summarize.scss';
.right{
  height: 334px;
  .card{
    height: 80px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px 10px;
    margin-bottom: 8px;
    .title{
      font-size: 14px;
      color: #646464;
      line-height: 30px;
    }
    .num, .unit{
      font-size: 16px;
      line-height: 30px;
      font-weight: 550;
    }
    .icon{
      margin-top: 5px;
    }
  }
  .card:last-child{
    margin-bottom: 0;
  }
}
.icon-web-icon-,.icon-down-copy{
  font-size: 20px;
}
#main_energy{
  //width: 650px;
  height: 298px;
}
</style>
